<template>
  <view class="container">
    <!-- 使用 scroll-view 包裹表格 -->
    <scroll-view scroll-y="true" style="width: 90%; height: 60vh; margin-top: 30rpx;">
      <table style="width: 100%;">
        <thead>
        <tr style="background-color: #ccc">
          <th>课程名</th>
          <th>课程序号</th>
          <th>任课教师</th>
          <th>上课周数</th>
          <th>学分</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in courseData" :key="index">
          <td>{{ item.courseName }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.teacherName }}</td>
          <td>第{{ item.startWeek }}-{{ item.endWeek }}周</td>
          <td>{{ item.studyScore }}</td>
          <td><button class="button" @click="deleteCourse(item.id)">删除</button></td>
        </tr>
        </tbody>
      </table>
    </scroll-view>

    <view style="display: flex; margin-top: 60rpx;">
      <button class="button1" @click="add">新增课程</button>
      <button class="button1" @click="arrange">考试安排</button>
    </view>
  </view>
</template>
<script>
import student from "../../api/student";
import admin from "api/admin/index"
export default {
  data() {
    return {
      courseData: []
    }
  },
  onLoad() {
    this.courseList()
  },
  methods: {
    //课程列表
    async courseList() {
      try {
        const res = await student.selectAllCourses()
        this.courseData = res.data
      } catch (e) {
        return Promise.reject(e)
      }
    },

    //删除课程
    async deleteCourse(id) {
      try {
        await admin.deleteCourse(id)
        uni.showModal({
          content: '确认删除该课程？',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          success: (res) => {
            if (res.confirm) {
              this.showToast('课程删除成功!');
              this.courseList()
            } else {
              console.log('用户点击了取消');
            }
          }
        });
      } catch (e) {
        return Promise.reject(e)
      }
    },
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'success',
        duration: 1000
      });
    },
    //调整新增课程页面
    async add() {
      uni.navigateTo({
        url: '/pages/courseManage/addCourse', // 跳转的目标页面路径
        success: function () {
        },
        fail: function (err) {
        }
      });
    },
    //调整新增课程页面
    async arrange() {
      uni.navigateTo({
        url: '/pages/courseManage/examArrange', // 跳转的目标页面路径
        success: function () {
        },
        fail: function (err) {
        }
      });
    }
  },

}
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 14px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
}

.button {
  border: 0;
  color: #d02424;
  font-size: 12px;
  padding: 3px;
}

.button1 {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
  margin: 0 60rpx; /* 为按钮之间添加间距 */
  padding: 10rpx 20rpx;
}

/* 确保 scroll-view 中的内容不会超出容器 */
scroll-view {
  overflow-y: auto; /* 显示垂直滚动条 */
  -webkit-overflow-scrolling: touch; /* 使滚动更平滑（适用于 iOS） */
}
</style>